<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
        
        .toubu{
            height: 66px;
            background: greenyellow;
            border-bottom: 1px solid skyblue;
        }
        .daohang{
            height: 512px;
            width: 1207px;
            background: gray;
            margin: 25px auto ;
        }
        .caidan{
            height: 36px;
            width: 1207px;
            background:rebeccapurple;
            margin: 0px auto ;
        }
        .weibu{
            height: 1000px;
            width: 1207px;
            background: #f5f5f5;
            margin: 25px auto 12px;
        }
        .yewei{
            height: 35px;
            width: 1207px;
            text-align: center;
            line-height: 35px;
            margin: 12px auto 0px;
        }
        .toubu .left{
            float: left;
            margin-top: 26px;
            margin-left: 35px;
        }
        .toubu ul{
            float: left;
            margin-top:15px;
            margin-left: 257px;
        }
        .toubu .right{
            float: right;
            margin-top:15px;

        }
        .toubu li{
            float: left;
            margin-top:15px;
        }
        .daohang .left{
            float:left;
            width: 909px;
        }
        .daohang ul{
            float:right;
            width: 271px;

        }
        .daohang .right li{
            width: 272px;
            height: 163px;
            margin-bottom: 12px;
            background: red;
            overflow: hidden;
            position: relative;
        }
        .daohang .right dt{
            height: 511px;
        }
        .daohang .right p{
            position: absolute;
            left: 0px;
            bottom: 0px;
            background: rgba(0, 0,0,0.3);
            width: 289px;
            height: 52px;
            line-height: 30px;
            color:white;
        }
        .daohang .yizi{
            width: 100%;
            height: auto;
        }
        .daohang .taideng{
            width: 100%;
            height: auto;
        }
        .daohang .sheji{
            width: 100%;
            height: auto;
        }
        textarea{
            resize:none;
            width: 131px;
            height: 100px;
            outline: none;
        }
        textarea{
            resize:none;
            width: 400px;
            height: 100px;
            outline: none;
        }
        .weibu li{
            height: 314px;
            width: 289px;
            background:#ffffff;
            overflow: hidden;
            position: relative;
            margin-bottom: 12px;
            float: left;
        }
        .weibu .matong{
            margin-right: 17px;
            margin-left: 17px;
        }
        .weibu .yujia{
            margin-right: 17px;  
        }
        .weibu .shizhuang{
            margin-right: 17px;
            margin-left: 17px;
        }
        .weibu .guoji{
            margin-right: 17px;
        }
        .weibu .qianbi{
            margin-right: 17px;
            margin-left: 17px;
        }
        .weibu .tanzi{
            margin-right: 17px;
        }
        .zanzu{
            width: 1207px;
            height: 240px;
            margin-top: 75px;
            margin-left: auto;
            margin-right: auto;
        }
        .zanzu .hz{
            font-size: 13px;
            color: gray;
            margin-bottom: 64px;
        }
        .zanzu li{
            float: left;
            margin-bottom:37px; 
            margin-left: 10px;
        }
        .zanzu .yq{
            float: left;
            font-size: 13px;
            color: gray;
            margin-top: 37px;
            width: 1200px;
        }
        .zanzu .yj{
            font-size: 13px;
            color: gray;
            width: 1200px;
            margin-top: 30px;
            float: left;
            
        }


        </style>
    </head>
    <body>
        <div class="toubu">
            <span class="left">三</span>
            <ul>
                <li>赞</li>
                <li>赞</li>
                <li>赞</li>
                <li>赞</li>

            </ul>
            <span class="right">登录</span>
        </div>
        <div class="daohang">
            <img src="images/s003.jpg" alt="" class="dt">
            <ul class="right">
                <li><img src="images/s02.jpg" alt="" class="taideng">
                    <p>想点亮圣诞气氛，试试这个驯鹿灯</p>
                </li>
                <li>
                    <img src="images/s03.jpg" alt="" class="sheji">
                    <p>Designer 100: 100个设计师，100个故事</p>
                </li>
                <li><img src="images/s04.jpg" alt="" class="yizi">
                <p>旧椅子获新生，还比以前更炫酷了</p></li>
            </ul>
        </div>
        <ul class="caidan">
            <form action="">
                <select name="" id="">
                   <option value="">最新</option> 
                </select>
                <select name="" id="">
                    <option value="">最热</option> 
                 </select>
                 <select name="" id="">
                    <option value="">热议</option> 
                 </select>
                 <select name="" id="">
                    <option value="">随机</option> 
                 </select>
                
            </form>
        </ul>
        <ul class="weibu">
            <ul>
                <li>
                    <img src="images/i01.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设计师的创意</p>
                </li>
                <li class="matong">
                    <img src="images/i02.jpg" alt="">
                <p>马桶刷也要有优雅的姿态</p>
                </li>
                <li class="yujia">
                    <img src="images/i03.jpg" alt="">
                    <p>健身也是 [科技范] ，你以为仅仅只是个瑜伽垫？</p>
                </li>
                <li class="shuazi">
                    <img src="images/i04.jpg" alt="">
                    <p>牙缝清洁怎么办？牙签牙线都过时了，用[刷子]刷吧</p>
                </li>
                <li class="shujia">
                    <img src="images/i05.jpg" alt="">
                    <p>矮了怎么办？照样能够拿到书架最顶端的书</p>
                </li>
                <li class="shizhuang">
                    <img src="images/i06.png" alt="">
                    <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</p>
                </li>
                <li class="guoji">
                    <img src="images/i07.png" alt="">
                    <p>中国国际设计节PK世界工业设计大会，哪个会更棒？</p>
                </li>
                <li class="gongye">
                    <img src="images/i07.jpg" alt="">
                    <p>首届世界工业设计大会开在家门口杭州，中国设计师们燥起来</p>
                </li>
                <li>
                    <img src="images/i08.jpg" alt="">
                    <p>窝在北方的暖炉里，你应该需要这样一个散热阀门？</p>
                </li>
                <li class="qianbi">
                    <img src="images/i09.jpg" alt="">
                    <p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
                </li>
                <li class="tanzi">
                    <img src="images/i10.jpg" alt="">
                    <p>依靠在毯子上，这件事听着就让人舒坦</p>
                </li>
                <li>
                    <img src="images/i11.jpg" alt="">
                    <p>别笑话虚拟键盘没有实体按键，打字or音乐，他们说变就能变</p>
                </li>
            </ul>
        </ul>
        <p class="yewei">太快了吧，慢慢来。O(∩_∩)O~</p>
        <div class="zanzu">
            <p class="hz">合作伙伴</p>

            <ul>
                    <li><img src="images/x01.png" alt=""></li>
                    <li><img src="images/x02.png" alt=""></li>
                    <li><img src="images/x03.png" alt=""></li>
                    <li><img src="images/x04.png" alt=""></li>
                    <li><img src="images/x05.png" alt=""></li>
                    <li><img src="images/x06.png" alt=""></li>
                    <li><img src="images/x07.jpg" alt=""></li>
            </ul>
            <p class="yq">友情链接</p>
            <p class="yj">DRC北京工业设计创意产业基地  |  中国工业设计协会  |  设计帮  |  网易家居  |  凤凰家居  |  智东西  |  壹网空间  |  七牛云储存  |  高清图片 |  Fotor</p>
        </div>
        
    </body>
</html>